<template>
	<view class="p-h24 p-v40">
		<view class="relative p-l28 m-b20 title">
			<text class="text-700-132">面试信息</text>
		</view>
		<view class="m-b40 bg-1 r-10 p-a30 ">
			<view class="m-b20">
				<text class="text-400-128">嗨！张三 先生：</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">恭喜你投递的【前台行政】岗位已通过简历筛选，现邀请你参见面试</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">时间：2019-01-07 14:30</text>
			</view>
			<view class="m-b20">
				<text class="text-400-128">联系电话：028-123456</text>
			</view>
			<view>
				<text class="text-400-128">地址：成都市武侯区泰达时代中心</text>
			</view>
		</view>
		<view class="relative p-l28 m-b20 title">
			<text class="text-700-132">面试时间确认</text>
		</view>
		<view class="m-b40 bg-1 r-10 p-a30 ">
			<view class="flex">
				<text class="text-400-128">日期：</text>
				<view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('date')">
					<text v-if="pickedDate" class="text-400-128">{{ pickedDate }}</text>
					<text v-else class="text-400-328">请选择</text>
					<image class="square-36" src="/static/images/public/calendar.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="flex m-t20">
				<text class="text-400-128">时间：</text>
				<view class="flex-1 p-h20 h-80 flex-sb field" @click="openPicker('time')">
					<text v-if="pickedTime" class="text-400-128">{{ pickedTime }}</text>
					<text v-else class="text-400-328">请选择</text>
					<image class="square-36" src="/static/images/public/clock.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="flex">
			<view class="flex-1 flex-c h-76 r-10 bg-2">
				<text class="text-700-228">确认提交</text>
			</view>
			<view class="m-l20 flex-1 flex-c h-76 r-10 bg-7">
				<text class="text-700-328">返回</text>
			</view>
		</view>
		<up-datetime-picker
				:show="showPicker"
				v-model="pickedValue"
				:mode="pickerMode"
				closeOnClickOverlay
				@cancel="closePicker"
				@close="closePicker"
				@confirm="onConfirm"
		></up-datetime-picker>
	</view>
</template>

<script lang="ts" setup>
	import { nextTick, ref } from 'vue'
	import { timeFormat } from '@/utils/utils'
	
	type PickerMode = 'date' | 'time'
	
	const showPicker = ref(false)
	const pickerMode = ref<PickerMode>('date')
	const pickedValue = ref('')
	const pickedDate = ref('')
	const pickedTime = ref('')
	
	const openPicker = (mode: PickerMode) => {
		pickerMode.value = mode
		
		let picked = ''
		
		if (mode === 'date') {
			const date = pickedDate.value ? +new Date(pickedDate.value) : +Date.now()
			picked = timeFormat(date)
		} else if (mode === 'time') {
			const dateTime = pickedTime.value ? new Date(`${timeFormat(Date.now())} ${pickedTime.value}`) : Date.now()
			picked = timeFormat(+dateTime, 'hh:MM')
		}
		
		pickedValue.value = picked
		nextTick(() => {
			showPicker.value = true
		})
	}
	
	const closePicker = () => {
		showPicker.value = false
	}
	
	const onConfirm = (e: any) => {
		pickedValue.value = e.value
		if (e.mode === 'date') {
			pickedDate.value = timeFormat(+new Date(e.value))
		} else {
			pickedTime.value = e.value
		}
		showPicker.value = false
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.title {
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			width: 8rpx;
			height: 26rpx;
			background-color: $bg-color-2;
			transform: translateY(-50%);
		}
	}
	
	.field {
		position: relative;
		&::before {
			@include hairline;
			border-width: 1px;
			border-radius: 12rpx;
		}
	}
</style>
